<template>
  <!--打印时输入弹窗-->
  <el-dialog append-to-body title="其他信息" :visible.sync="visible" width="30%" :destroy-on-close="true">
    <div class="form-contant">
      <avue-form ref="otherInfo" v-model="otherInfo" :option="otherInfoOption" @submit="otherInfoSubmit"></avue-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" size="small" @click="saveOtherInfo"><i class="el-icon-circle-plus-outline"></i><span>保 存</span></el-button>
      <el-button size="small" @click="handleCancel"><i class="el-icon-circle-close"></i><span>取 消</span></el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    otherInfoOption: {
      type: Object,
      default: () => ({})
    }
  },
  name: 'index',
  data() {
    return {
      otherInfo: {}
    };
  },
  methods: {
    handleCancel() {
      this.$emit('update:visible', false);
    },
    saveOtherInfo() {
      this.$refs.otherInfo.submit();
    },
    otherInfoSubmit() {
      const otherInfo = this.filterChart(this.otherInfo);
      this.$emit('printInfo', otherInfo);
      this.$emit('update:visible', false);
    },
    filterChart(row = {}) {
      const filteredRow = Object.keys(row).reduce((acc, key) => {
        if (!key.includes('$')) {
          acc[key] = row[key];
        }
        return acc;
      }, {});
      return filteredRow;
    }
  }
};
</script>

<style scoped></style>
